<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚拟银行系统 - 设置</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <style>
    /* 设置页面特定样式 */
    .settings-container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .settings-section {
      margin-bottom: var(--spacing-lg);
    }
    
    .settings-title {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: var(--spacing-md);
      padding-bottom: var(--spacing-sm);
      border-bottom: 1px solid var(--divider-color);
    }
    
    .settings-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacing-md) 0;
      border-bottom: 1px solid var(--divider-color);
    }
    
    .settings-item:last-child {
      border-bottom: none;
    }
    
    .settings-item-info {
      flex: 1;
    }
    
    .settings-item-title {
      font-weight: 500;
      margin-bottom: 4px;
    }
    
    .settings-item-desc {
      color: var(--light-text);
      font-size: 13px;
    }
    
    .settings-item-control {
      margin-left: var(--spacing-md);
    }
    
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 24px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 24px;
    }
    
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .toggle-slider {
      background-color: var(--primary-color);
    }
    
    input:focus + .toggle-slider {
      box-shadow: 0 0 1px var(--primary-color);
    }
    
    input:checked + .toggle-slider:before {
      transform: translateX(22px);
    }
    
    .language-select,
    .theme-select {
      padding: var(--spacing-sm) var(--spacing-md);
      border: 1px solid var(--divider-color);
      border-radius: var(--border-radius-md);
      font-size: 14px;
      color: var(--text-color);
      background-color: white;
      min-width: 120px;
    }
    
    /* 安全设置样式 */
    .security-level {
      display: flex;
      align-items: center;
      margin-top: var(--spacing-sm);
    }
    
    .security-level-bar {
      height: 8px;
      flex: 1;
      background-color: var(--light-bg);
      border-radius: 4px;
      margin-right: var(--spacing-md);
      overflow: hidden;
    }
    
    .security-level-progress {
      height: 100%;
      border-radius: 4px;
    }
    
    .security-level-progress.low {
      width: 33%;
      background-color: var(--error-color);
    }
    
    .security-level-progress.medium {
      width: 66%;
      background-color: var(--warning-color);
    }
    
    .security-level-progress.high {
      width: 100%;
      background-color: var(--success-color);
    }
    
    .security-level-text {
      font-size: 13px;
      font-weight: 500;
    }
    
    .security-level-text.low {
      color: var(--error-color);
    }
    
    .security-level-text.medium {
      color: var(--warning-color);
    }
    
    .security-level-text.high {
      color: var(--success-color);
    }
    
    /* 其他操作区块 */
    .other-actions {
      margin-top: var(--spacing-xl);
    }
    
    .danger-zone {
      border: 1px solid var(--error-color);
      border-radius: var(--border-radius-md);
      padding: var(--spacing-md);
      margin-top: var(--spacing-lg);
    }
    
    .danger-zone-title {
      color: var(--error-color);
      font-weight: 500;
      margin-bottom: var(--spacing-md);
    }
  </style>
</head>
<body>
  <div class="app-wrapper">
    <!-- 顶部导航栏 -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- 侧边栏 -->
      <div id="sidebar"></div>
      
      <!-- 主内容区 -->
      <div class="content">
        <div class="page-header">
          <div class="page-title">设置</div>
          <div class="breadcrumb">
            <a href="/index.html">首页</a>
            <i class="fas fa-angle-right"></i>
            <span>设置</span>
          </div>
        </div>
        
        <div class="settings-container">
          <!-- 偏好设置 -->
          <div class="card settings-section">
            <div class="card-header">
              <h2 class="card-title">偏好设置</h2>
            </div>
            <div class="card-body">
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">主题模式</div>
                  <div class="settings-item-desc">选择浅色或深色主题</div>
                </div>
                <div class="settings-item-control">
                  <select class="theme-select" id="theme-mode">
                    <option value="light">浅色模式</option>
                    <option value="dark">深色模式</option>
                    <option value="system">跟随系统</option>
                  </select>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">语言</div>
                  <div class="settings-item-desc">选择界面语言</div>
                </div>
                <div class="settings-item-control">
                  <select class="language-select" id="language">
                    <option value="zh-CN">简体中文</option>
                    <option value="en-US">English</option>
                  </select>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">自动登出</div>
                  <div class="settings-item-desc">长时间无操作自动退出登录</div>
                </div>
                <div class="settings-item-control">
                  <label class="toggle-switch">
                    <input type="checkbox" id="auto-logout" checked>
                    <span class="toggle-slider"></span>
                  </label>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">交易提醒</div>
                  <div class="settings-item-desc">开启后会收到交易通知</div>
                </div>
                <div class="settings-item-control">
                  <label class="toggle-switch">
                    <input type="checkbox" id="transaction-notification" checked>
                    <span class="toggle-slider"></span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 安全设置 -->
          <div class="card settings-section">
            <div class="card-header">
              <h2 class="card-title">安全设置</h2>
            </div>
            <div class="card-body">
              <div class="security-level">
                <div class="security-level-bar">
                  <div class="security-level-progress medium"></div>
                </div>
                <div class="security-level-text medium">中等</div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">登录密码</div>
                  <div class="settings-item-desc">定期更改密码可以提高账户安全性</div>
                </div>
                <div class="settings-item-control">
                  <button class="btn btn-outline btn-sm" id="change-password-btn">修改</button>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">交易密码</div>
                  <div class="settings-item-desc">用于转账、提现等操作</div>
                </div>
                <div class="settings-item-control">
                  <button class="btn btn-outline btn-sm" id="change-payment-password-btn">修改</button>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">双因素认证</div>
                  <div class="settings-item-desc">使用手机验证码进行双重验证</div>
                </div>
                <div class="settings-item-control">
                  <label class="toggle-switch">
                    <input type="checkbox" id="two-factor-auth">
                    <span class="toggle-slider"></span>
                  </label>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">登录设备管理</div>
                  <div class="settings-item-desc">查看并管理已登录的设备</div>
                </div>
                <div class="settings-item-control">
                  <button class="btn btn-outline btn-sm" id="manage-devices-btn">管理</button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 通知设置 -->
          <div class="card settings-section">
            <div class="card-header">
              <h2 class="card-title">通知设置</h2>
            </div>
            <div class="card-body">
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">系统通知</div>
                  <div class="settings-item-desc">关于系统维护、更新等通知</div>
                </div>
                <div class="settings-item-control">
                  <label class="toggle-switch">
                    <input type="checkbox" id="system-notification" checked>
                    <span class="toggle-slider"></span>
                  </label>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">交易通知</div>
                  <div class="settings-item-desc">转账、充值、提现等交易通知</div>
                </div>
                <div class="settings-item-control">
                  <label class="toggle-switch">
                    <input type="checkbox" id="transaction-alert" checked>
                    <span class="toggle-slider"></span>
                  </label>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">营销信息</div>
                  <div class="settings-item-desc">最新产品、优惠活动等信息</div>
                </div>
                <div class="settings-item-control">
                  <label class="toggle-switch">
                    <input type="checkbox" id="marketing-notification">
                    <span class="toggle-slider"></span>
                  </label>
                </div>
              </div>
              
              <div class="settings-item">
                <div class="settings-item-info">
                  <div class="settings-item-title">邮件通知</div>
                  <div class="settings-item-desc">通过邮件接收重要通知</div>
                </div>
                <div class="settings-item-control">
                  <label class="toggle-switch">
                    <input type="checkbox" id="email-notification" checked>
                    <span class="toggle-slider"></span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 其他操作 -->
          <div class="other-actions">
            <div class="card">
              <div class="card-header">
                <h2 class="card-title">其他操作</h2>
              </div>
              <div class="card-body">
                <div class="settings-item">
                  <div class="settings-item-info">
                    <div class="settings-item-title">清除缓存</div>
                    <div class="settings-item-desc">清除本地缓存数据</div>
                  </div>
                  <div class="settings-item-control">
                    <button class="btn btn-outline btn-sm" id="clear-cache-btn">清除</button>
                  </div>
                </div>
                
                <div class="settings-item">
                  <div class="settings-item-info">
                    <div class="settings-item-title">帮助与反馈</div>
                    <div class="settings-item-desc">常见问题解答和意见反馈</div>
                  </div>
                  <div class="settings-item-control">
                    <button class="btn btn-outline btn-sm" id="help-feedback-btn">查看</button>
                  </div>
                </div>
                
                <div class="settings-item">
                  <div class="settings-item-info">
                    <div class="settings-item-title">关于系统</div>
                    <div class="settings-item-desc">系统版本、法律信息等</div>
                  </div>
                  <div class="settings-item-control">
                    <button class="btn btn-outline btn-sm" id="about-btn">查看</button>
                  </div>
                </div>
                
                <div class="danger-zone">
                  <div class="danger-zone-title">危险操作区</div>
                  <div class="settings-item">
                    <div class="settings-item-info">
                      <div class="settings-item-title">注销账户</div>
                      <div class="settings-item-desc">永久删除您的账户及所有数据</div>
                    </div>
                    <div class="settings-item-control">
                      <button class="btn btn-danger btn-sm" id="delete-account-btn">注销</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改密码模态框 -->
  <div class="modal" id="password-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">修改登录密码</h4>
          <button type="button" class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <form id="password-form">
            <div class="form-group">
              <label>当前密码</label>
              <div class="input-wrapper">
                <input type="password" id="current-password" class="form-control" placeholder="请输入当前密码">
                <div class="input-icon">
                  <i class="fas fa-lock"></i>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>新密码</label>
              <div class="input-wrapper">
                <input type="password" id="new-password" class="form-control" placeholder="请输入新密码">
                <div class="input-icon">
                  <i class="fas fa-lock"></i>
                </div>
              </div>
              <div class="form-help-text">密码长度为8-20位，包含字母和数字</div>
            </div>
            <div class="form-group">
              <label>确认新密码</label>
              <div class="input-wrapper">
                <input type="password" id="confirm-password" class="form-control" placeholder="请再次输入新密码">
                <div class="input-icon">
                  <i class="fas fa-lock"></i>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline" id="password-cancel-btn">取消</button>
          <button type="button" class="btn btn-primary" id="password-save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改交易密码模态框 -->
  <div class="modal" id="payment-password-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">修改交易密码</h4>
          <button type="button" class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
          <form id="payment-password-form">
            <div class="form-group">
              <label>当前交易密码</label>
              <div class="input-wrapper">
                <input type="password" id="current-payment-password" class="form-control" placeholder="请输入当前交易密码">
                <div class="input-icon">
                  <i class="fas fa-lock"></i>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>新交易密码</label>
              <div class="input-wrapper">
                <input type="password" id="new-payment-password" class="form-control" placeholder="请输入新交易密码">
                <div class="input-icon">
                  <i class="fas fa-lock"></i>
                </div>
              </div>
              <div class="form-help-text">交易密码为6位数字</div>
            </div>
            <div class="form-group">
              <label>确认新交易密码</label>
              <div class="input-wrapper">
                <input type="password" id="confirm-payment-password" class="form-control" placeholder="请再次输入新交易密码">
                <div class="input-icon">
                  <i class="fas fa-lock"></i>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline" id="payment-password-cancel-btn">取消</button>
          <button type="button" class="btn btn-primary" id="payment-password-save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/settings.js"></script>
</body>
</html>
